{% extends "base.html" %}
{% block content %}
    <div class="scui-test">
    <form novalidate class="form-horizontal" v-on:submit.prevent="submit_form">
        <div class="form-group control-group">
            <label for="test_host" class="col-sm-2 control-label">Host</label>
            <div class="col-sm-10 controls">
                <input type="text" class="form-control" id="test_host" placeholder="Please input the host address" required="required" v-model="formdata.host">
                <p class="help-block"></p>
            </div>
        </div>
        <div class="form-group control-group">
            <label for="test_user" class="col-sm-2 control-label">User</label>
            <div class="col-sm-10 controls">
                <input type="text" class="form-control" id="user" placeholder="username" v-model="formdata.user" required="required">
                <p class="help-block"></p>
            </div>
        </div>
        <div class="form-group control-group">
            <label for="test_password" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10 controls">
                <input type="password" class="form-control" id="test_password" placeholder="Password" v-model="formdata.passwd" required="required">
                <p class="help-block"></p>
            </div>
        </div>
        <div class="form-group">
            <label for="test_type" class="col-sm-2 control-label">Connect</label>
            <div class="col-sm-10">
                <select class="form-control" id="test_type" v-model="formdata.conntype" required="required">
                    <option>Telnet</option>
                    <option>SSH</option>
                </select>
            </div>
        </div>
        <div class="form-group control-group">
            <label for="test_command" class="col-sm-2 control-label">command</label>
            <div class="col-sm-10 controls">
                <input type="text" class="form-control" id="test_command" placeholder="ls -l" v-model="formdata.command" required="required">
                <p class="help-block"></p>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button :disabled="loading" class="button button-primary button-border button-rounded">
                    <span v-show="loading">
                        <div class="spinner">
                            <div class="spinner-container container1">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                            <div class="spinner-container container2">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                            <div class="spinner-container container3">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                        </div>
                    </span>
                    <span v-else>Test</span>
                </button>
            </div>
        </div>
    </form>
        <div v-show="result_panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Test result</h3>
                </div>
                <div class="panel-body">
                    <pre>{[[ result_data ]]}</pre>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
